<!--
 * @Author: your name
 * @Date: 2019-12-18 14:27:27
 * @LastEditTime : 2019-12-18 14:41:52
 * @LastEditors  : Please set LastEditors
 * @Description: 底部导航组件(正常版本)
 * @FilePath: \vue_mobile_template\src\components\ShopFoot.vue
 -->

<template>
  <div class="footnav">
    <router-link 
    class="foot_item" tag="div" 
    :to="item.path" v-for="(item,index) in navlist" 
    :key="index">
      <img class="foot_icon" :src="index == active?item.icon_selected:item.icon" alt="">
      <span>{{item.name}}</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'FootNav',
  data(){
    return{
      navlist:[
        {
          name:'商城',path:'/shopindex',
          icon:require('../assets/images/shop/footnav/home@2x.png'),
          icon_selected:require('../assets/images/shop/footnav/home_selected@2x.png')
        },
        {
          name:'分类',path:'/shopsort',
          icon:require('../assets/images/shop/footnav/sort@2x.png'),
          icon_selected:require('../assets/images/shop/footnav/sort_selected@2x.png'),
        },
         {
          name:'入驻',path:'/entered',
          icon:require('../assets/images/shop/footnav/cart@2x.png'),
          icon_selected:require('../assets/images/shop/footnav/cart_selected@2x.png')
        },
        {
          name:'我的',path:'/userindex',
          icon:require('../assets/images/shop/footnav/person@2x.png'),
          icon_selected:require('../assets/images/shop/footnav/person_selected@2x.png')
        },
      ],
      active:0,
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.init_nav();
    })
  },
  methods:{
    init_nav(){
      let path = this.$route.fullPath;
      console.log('path',path);
      this.navlist.forEach((item,index)=>{
        if(path.indexOf(item.path)>-1){
          this.active = index;
        }
      })
      
    }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.footnav{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 98px;
  width:100%;
  position: fixed;
  bottom:0;
  z-index:1000;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .3);
  .foot_item{
    height:100%;
    flex:1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 10px 0;
    align-items: center;
    color:#333;
    font-size: 24px;
    .foot_icon{
      width:40px;
      height: auto;
    }
  }
  .router-link-active{
      color:#FA7268;
  }
}

</style>
